Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose SolidFormApi type #892

Merged
merged 3 commits into from
Aug 12, 2024
Merged

Expose SolidFormApi type #892

merged 3 commits into from
Aug 12, 2024

Conversation

oscartbeaumont
Copy link
Contributor

I'm currently building a InputField abstraction wrapping a form and it would be useful to be able to directly name the type.

function InputField(opts: { form: SolidFormApi<T> } ) {
   return <opts.form.Field ... />
}

For now i'm doing the following but it's kinda annoying:

type FormResult<
	TData,
	T extends Validator<TData, unknown> | undefined = undefined,
> = ReturnType<typeof createForm<TData, T>>;

Copy link

nx-cloud bot commented Aug 8, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1a5e486. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

Copy link

pkg-pr-new bot commented Aug 8, 2024

commit: 1a5e486

@tanstack/angular-form

pnpm add https://pkg.pr.new/@tanstack/angular-form@892

@tanstack/form-core

pnpm add https://pkg.pr.new/@tanstack/form-core@892

@tanstack/lit-form

pnpm add https://pkg.pr.new/@tanstack/lit-form@892

@tanstack/react-form

pnpm add https://pkg.pr.new/@tanstack/react-form@892

@tanstack/solid-form

pnpm add https://pkg.pr.new/@tanstack/solid-form@892

@tanstack/valibot-form-adapter

pnpm add https://pkg.pr.new/@tanstack/valibot-form-adapter@892

@tanstack/vue-form

pnpm add https://pkg.pr.new/@tanstack/vue-form@892

@tanstack/yup-form-adapter

pnpm add https://pkg.pr.new/@tanstack/yup-form-adapter@892

@tanstack/zod-form-adapter

pnpm add https://pkg.pr.new/@tanstack/zod-form-adapter@892

Open in Stackblitz

More templates

@Balastrong
Copy link
Member

Thanks for the PR! Can you also export the type from packages/solid-form/src/index.tsx?


On a separate note, we're drafting a recommended approach for building custom/wrapper components in React, but I'd say the needs and challenges are the same for all frameworks.

Since you're also doing something similar, if you have feedback please share them in #825
An example component is on that PR: https://github.com/TanStack/form/pull/825/files#diff-b2e0803ded7363bf3432f160f7c7f6e9bf4f982ad13b08ecb4789c228774f956R22

@oscartbeaumont
Copy link
Contributor Author

Whoops, can't believe I forgot it in the index.ts 😳

Great to see your looking into this area. The example you linked looks one to one with what i've got (minus the React/Solid differences).

It's worth mentioning another motivation for this PR is when you run into a Typescript error like:

Return type of exported function has or is using name 'SolidFormApi' from external module "/Users/oscar/Desktop/mattrax/node_modules/.pnpm/@[email protected][email protected]/node_modules/@tanstack/solid-form/dist/esm/createForm" but cannot be named.

I am ran into this error when returning a createForm instance from a function defined in my UI package.

Being able to refer to SolidFormApi means I can hardcode the funtions return type and it solves the problem.

Copy link

codecov bot commented Aug 12, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.66%. Comparing base (5473bb8) to head (1a5e486).
Report is 89 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #892      +/-   ##
==========================================
+ Coverage   91.55%   91.66%   +0.11%     
==========================================
  Files          21        2      -19     
  Lines         900       36     -864     
  Branches      206        1     -205     
==========================================
- Hits          824       33     -791     
+ Misses         71        3      -68     
+ Partials        5        0       -5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Member

@Balastrong Balastrong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants